<template>
	
	<div class="pushItem" :style="direction=='left'?'margin-left:0%':'margin-left:20%'">
		
		<div class="user-avatar flex unified-flex-center unified-flex-align">
			<el-avatar shape="circle" :size="40"
				src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
		</div>
		
		<div class="value-box" :style="direction=='left'?'order:0':'order:-1'">
			<div class="mark"></div>
			{{value}}
		</div>
		
		
	</div>
	
	
</template>

<script>
	
	export default{
		
		data(){
			return {
				
				value:"asjdjandjaasjdjandjasndjasndjaksndasjkdnasjkdnasjdnasdasjdnasjdnaskjdnasjdasnkjdasndjkaasjdjandjasndjasndjaksndasjkdnasjkdnasjdnasdasjdnasjdnaskjdnasjdasnkjdasndjkaasjdjandjasndjasndjaksndasjkdnasjkdnasjdnasdasjdnasjdnaskjdnasjdasnkjdasndjkaasjdjandjasndjasndjaksndasjkdnasjkdnasjdnasdasjdnasjdnaskjdnasjdasnkjdasndjkasndjasndjaksndasjkdnasjkdnasjdnasdasjdnasjdnaskjdnasjdasnkjdasndjka"
			}
			
		},
		props:{
			direction:{	// 信息框方向  left左边  right右边
				type:String,
				default:"left"
			}
		}
		
		
	}
	
</script>

<style scoped="scoped">
	
	
	.user-avatar{
		width: 60px;
		height:60px;
		display: inline-block;
		float: left;
		text-align: center;
		padding: 10px;
	}
	.mark{
		background-color: transparent;
		border: 10px solid #42B983;
		width: 10px;
		height: 10px;
		background-color: #42B983;
		border-top-color: #FFFFFF;
		border-left-color: #FFFFFF;
		position: absolute;
		display: none;
	}
	.pushItem{
		min-width: 100%;
		max-width: 100%;
		width: 100%;
		min-width: 530px;
	}
	.value-box{
		word-break:break-all;
		padding: 6px;
		text-align: left;
		float: left;
		background-color: #2269F3;
		margin-top: 15px;
		border-radius: 6px;
		color: #fff;
		font-size: 13px;
		font-family: "宋体";
		letter-spacing: 2px;
		display: inline-block;
		max-width: 530px;
	}
</style>
